<template>
  <div id="app">
   <div class="container-fluid sticky-top bg-white shadow-sm" v-show="this.path != '/login' && this.path != '/register'">
      <div class="container">
        <nav class="navbar navbar-expand-lg bg-white navbar-light py-3 py-lg-0">
          <!-- <a href="index.html" class="navbar-brand"> -->
          <a href="" class="navbar-brand">
            <h1 class="m-0 text-uppercase text-primary">
              <i class="fa fa-clinic-medical me-2"></i>医心医疫
            </h1>
          </a>
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarCollapse"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav ms-auto py-0">
              <!-- <a href="index.html" class="nav-item nav-link active">首页</a> -->
              <router-link to="/" class="nav-item nav-link" :class="(this.path == '/' || this.path == '/home')?'active':''"
                >首页</router-link
              >
              <!-- <a href="about.html" class="nav-item nav-link">About</a> -->
              <!-- <a href="service.html" class="nav-item nav-link">Service</a> -->
              <router-link
                v-if="user && user.type"
                to="/patient/order"
                class="nav-item nav-link"
                :class="(this.path == '/patient/order')?'active':''"
                >我的订单</router-link
              ><!-- price -->
              <router-link v-else to="/appointment/list" class="nav-item nav-link"
              :class="(this.path == '/appointment/list')?'active':''"
                >预约列表</router-link
              >
              <div class="nav-item dropdown" v-if="user && user.type">
                <span
                :class="(this.path.includes('/doctor/list'))?'active':''"
                  class="nav-link dropdown-toggle"
                  data-bs-toggle="dropdown"
                  style="cursor: pointer"
                   
                  >门诊</span
                >
                <div class="dropdown-menu m-0">
                  <router-link v-for="list in outpatientList" :key="list.id" :to="'/doctor/list/' + list.id" class="dropdown-item"
                    >{{list.title}}</router-link
                  >
                </div>
              </div>
              <!-- <a href="contact.html" class="nav-item nav-link">Contact</a> -->
              <router-link to="/personal/information" class="nav-item nav-link"
              :class="(this.path == '/personal/information')?'active':''"
                >我的</router-link
              >
            </div>
          </div>
        </nav>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'
import {mapGetters} from 'vuex'

export default {
  name: 'App',
  data() {
    return {
      outpatientList:[
        {
          id:1,
          title:'发热门诊'
        },
        {
          id:2,
          title:'内科门诊'
        },
        {
          id:3,
          title:'耳鼻喉科门诊'
        },
        {
          id:4,
          title:'儿科门诊'
        },
        {
          id:5,
          title:'急诊'
        }
      ],
    }
  },
  computed:{
    ...mapGetters(['user']),
    path(){
      console.log(this.$route.path)
      return this.$route.path
    },
  },
  mounted() {
    console.log(this.path,this.user)
  },
  methods:{
  }
}
</script>

<style lang='scss'>
#app {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
:root {
  --primary: #13c5dd;
  --secondary: #354f8e;
  --light: #eff5f9;
  --dark: #1d2a4d;
}

.text-primary {
  color: var(--primary) !important;
}
.btn {
  font-weight: 700;
  transition: 0.5s;
}

.btn:hover {
  -webkit-box-shadow: 0 0.5rem 0.375rem -0.375rem #555555;
  -moz-box-shadow: 0 0.5rem 0.375rem -0.375rem #555555;
  box-shadow: 0 0.5rem 0.375rem -0.375rem #555555;
}

.btn-primary {
  color: #ffffff;
}

.btn-square {
  width: 2.25rem;
  height: 2.25rem;
}

.btn-sm-square {
  width: 1.75rem;
  height: 1.75rem;
}

.btn-lg-square {
  width: 2.875rem;
  height: 2.875rem;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

.back-to-top {
  position: fixed;
  display: none;
  right: 1.875rem;
  bottom: 0;
  border-radius: 50% 50% 0 0;
  z-index: 99;
}

.navbar-light .navbar-nav .nav-link {
  // font-family: 'Jost', sans-serif;
  font-family: "SimHei", sans-serif;
  position: relative;
  margin-left: 1.875rem; //导航栏间隔
  padding: 1.875rem 0;
  // font-size: 0.625rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--dark);
  outline: none;
  transition: 0.5s;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
  color: var(--primary);
}

@media (min-width: 62rem) {
  .navbar-light .navbar-nav .nav-link::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0.3125rem;
    bottom: 0;
    left: 50%;
    background: var(--primary);
    transition: 0.5s;
  }

  .navbar-light .navbar-nav .nav-link:hover::before,
  .navbar-light .navbar-nav .nav-link.active::before {
    width: 100%;
    left: 0;
  }
}

@media (max-width: 61.99875rem) {
  .navbar-light .navbar-nav .nav-link {
    margin-left: 0;
    padding: 0.625rem 0;
  }
}

.hero-header {
  background: url("@/assets/images/hero.jpg") top right no-repeat;
  background-size: cover;
}

.service-item {
  position: relative;
  height: 21.875rem;
  padding: 0 1.875rem;
  transition: 0.5s;
}

.service-item .service-icon {
  //tips的蓝色椭圆框
  width: 9.375rem;
  height: 6.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  border-radius: 50%;
  transform: rotate(-14deg);
}

.service-item .service-icon i {
  transform: rotate(15deg);
}
.navbar-light .navbar-nav .nav-link {
  // font-family: 'Jost', sans-serif;
  font-family: "SimHei", sans-serif;
  position: relative;
  margin-left: 1.875rem; //导航栏间隔
  padding: 1.875rem 0;
  // font-size: 0.625rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--dark);
  outline: none;
  transition: 0.5s;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
  color: var(--primary);
}

@media (min-width: 62rem) {
  .navbar-light .navbar-nav .nav-link::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0.3125rem;
    bottom: 0;
    left: 50%;
    background: var(--primary);
    transition: 0.5s;
  }

  .navbar-light .navbar-nav .nav-link:hover::before,
  .navbar-light .navbar-nav .nav-link.active::before {
    width: 100%;
    left: 0;
  }
}

@media (max-width: 61.99875rem) {
  .navbar-light .navbar-nav .nav-link {
    margin-left: 0;
    padding: 0.625rem 0;
  }
} 
</style>
